<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>理解data</h3>

        <p>姓名：{{name}}</p>
        <p>爱好1：{{aihao[0]}}</p>
        <p>爱好2：{{aihao[1]}}</p>
        <ul>
            <li>QQ:{{lianxi.QQ}}</li>
            <li>email:{{lianxi.email}}</li>
            <li>weixin:{{lianxi.weixin}}</li>
        </ul>
    </div>


    <script>
        // data: 它是一个对象，用来规定数据。

        // 现在是把vue当作一个模板引擎来使用。
        // 它的作用是把数据显示在页面上。data就是用来
        // 约定数据的。
        // 在后面的学习的，这个部分的数据会是
        // 从ajax接口中获取到的


        // 访问数据：
        // 方法一：在视图中，通过{{}}插值表达式 直接访问。
        /// 不要写data.XXX - 不要写data - 不要写data

        // 方法二：通过Vue实例vm来访问
        //  vm.XXX

        const vm = new Vue({
            el: "#app",
            // el: document.getElementById("app"),
            data: {
                name: '凡哥-凡叔',
                aihao:['听音乐','读书'],
                lianxi: {
                    QQ:"123456",
                    email:'xxxxxx',
                    weixin:'yyyyyy'
                }
            }
        })
        console.log(vm)
        console.log(vm.name)
        console.log(vm.aihao[1])
        console.log(vm.lianxi.QQ)
    </script>

</body>
</html>